<template>
  <div class="transform-details">
    <div class="details-header">
      <div class="details-title">
        <i class="fas fa-cogs"></i>
        <span>转换详情</span>
      </div>
    </div>

    <div class="tabs">
      <div
        v-for="tab in tabs"
        :key="tab.id"
        :class="['tab', { active: activeTab === tab.id }]"
        @click="selectTab(tab.id)"
      >
        <i :class="tab.icon"></i>
        <span>{{ tab.name }}</span>
      </div>
    </div>

    <div class="tab-content">
      <!-- 数据集结构 -->
      <div v-if="activeTab === 'structure'" class="dataset-structure">
        <div class="overview-stats">
          <div class="stat-card" v-for="stat in stats" :key="stat.label">
            <div class="stat-icon" :style="{ backgroundColor: stat.color }">
              <i :class="stat.icon"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">{{ stat.label }}</div>
              <div class="stat-value">{{ stat.value }}</div>
            </div>
          </div>
        </div>

        <div class="structure-table-container">
          <table class="structure-table">
            <thead>
              <tr>
                <th>状态</th>
                <th>字段名称</th>
                <th>字段类型</th>
                <th>必填</th>
                <th>数据类型</th>
                <th>来源</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="field in fields" :key="field.name">
                <td>
                  <span :class="['status-badge', getStatusClass(field.status)]">
                    {{ field.status }}
                  </span>
                </td>
                <td>{{ field.name }}</td>
                <td>{{ field.type }}</td>
                <td>
                  <span :class="['required-badge', field.required ? 'required' : 'optional']">
                    {{ field.required ? '是' : '否' }}
                  </span>
                </td>
                <td>{{ field.dataType }}</td>
                <td>
                  <div class="source-info">
                    <i class="fas fa-info-circle"></i>
                    <span>{{ field.source }}</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 转换规则 -->
      <div v-else-if="activeTab === 'rules'" class="transform-rules">
        <div class="rules-container">
          <div class="rule-group" v-for="group in ruleGroups" :key="group.id">
            <div class="rule-group-header">
              <i :class="group.icon"></i>
              <span>{{ group.name }}</span>
            </div>
            <div class="rule-items">
              <div class="rule-item" v-for="rule in group.rules" :key="rule.id">
                <div class="rule-title">
                  <i :class="rule.icon"></i>
                  <span>{{ rule.name }}</span>
                </div>
                <div class="rule-content">
                  <div v-for="detail in rule.details" :key="detail">{{ detail }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据质量 -->
      <div v-else-if="activeTab === 'quality'" class="data-quality">
        <div class="quality-metrics">
          <div class="metric-card" v-for="metric in qualityMetrics" :key="metric.name">
            <div class="metric-header">
              <i :class="metric.icon"></i>
              <span>{{ metric.name }}</span>
            </div>
            <div class="metric-value">{{ metric.value }}</div>
            <div class="metric-details">
              <div class="detail-item" v-for="detail in metric.details" :key="detail.label">
                <span class="detail-label">{{ detail.label }}</span>
                <span class="detail-value">{{ detail.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'structure',
      tabs: [
        { id: 'structure', name: '数据集结构', icon: 'fas fa-table' },
        { id: 'rules', name: '转换规则', icon: 'fas fa-random' },
        { id: 'quality', name: '数据质量', icon: 'fas fa-chart-pie' }
      ],
      stats: [
        { label: '总字段数', value: '42', icon: 'fas fa-list', color: '#4285F4' },
        { label: '新增字段', value: '8', icon: 'fas fa-plus', color: '#34A853' },
        { label: '修改字段', value: '12', icon: 'fas fa-pen', color: '#FBBC05' },
        { label: '删除字段', value: '5', icon: 'fas fa-trash', color: '#EA4335' }
      ],
      fields: [
        { name: 'customer_id', status: '修改', type: '主键', required: true, dataType: 'BIGINT', source: 'cust_id (源)' },
        { name: 'full_name', status: '修改', type: '普通', required: true, dataType: 'VARCHAR(100)', source: 'name (源)' },
        { name: 'email', status: '匹配', type: '普通', required: false, dataType: 'VARCHAR(100)', source: 'email (源)' },
        { name: 'province', type: '普通', required: false, dataType: 'VARCHAR(50)', source: 'address (拆分)' },
        { name: 'city', type: '普通', required: false, dataType: 'VARCHAR(50)', source: 'address (拆分)' },
        { name: 'registration_date', status: '转换', type: '普通', required: true, dataType: 'TIMESTAMP', source: 'reg_date (转换)' },
        { name: 'customer_level', type: '计算', required: false, dataType: 'INT', source: '新增计算字段' }
      ],
      ruleGroups: [
        {
          id: 1,
          name: '数据清洗规则',
          icon: 'fas fa-filter',
          rules: [
            {
              id: 1,
              name: '字段重命名',
              icon: 'fas fa-exchange-alt',
              details: ['cust_id → customer_id', 'name → full_name']
            },
            {
              id: 2,
              name: '地址拆分',
              icon: 'fas fa-cut',
              details: ['地址 → province, city']
            }
          ]
        },
        {
          id: 2,
          name: '数据增强规则',
          icon: 'fas fa-chart-line',
          rules: [
            {
              id: 3,
              name: '客户等级计算',
              icon: 'fas fa-star',
              details: ['基于交易金额和频率计算客户等级']
            },
            {
              id: 4,
              name: '客户价值计算',
              icon: 'fas fa-gem',
              details: ['基于历史交易记录计算客户价值']
            }
          ]
        }
      ],
      qualityMetrics: [
        {
          name: '完整性',
          value: '98.5%',
          icon: 'fas fa-check-circle',
          details: [
            { label: '必填字段完整率:', value: '99.2%' },
            { label: '可选字段完整率:', value: '85.7%' }
          ]
        },
        {
          name: '准确性',
          value: '97.8%',
          icon: 'fas fa-bullseye',
          details: [
            { label: '格式正确率:', value: '98.9%' },
            { label: '值域合规率:', value: '96.5%' }
          ]
        },
        {
          name: '唯一性',
          value: '100%',
          icon: 'fas fa-fingerprint',
          details: [
            { label: '主键唯一性:', value: '100%' },
            { label: '重复记录率:', value: '0%' }
          ]
        }
      ]
    };
  },
  methods: {
    selectTab(tabId) {
      this.activeTab = tabId;
    },
    getStatusClass(status) {
      switch(status) {
        case '匹配': return 'match';
        case '修改': return 'modified';
        case '转换': return 'converted';
        case '缺失': return 'missing';
        default: return '';
      }
    }
  }
};
</script>

<style scoped>
.transform-details {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.details-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--header-bg);
}

.details-title {
  font-size: 1.4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.details-title i {
  color: var(--step-3-color);
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: var(--header-bg);
}

.tab {
  padding: 15px 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tab-inactive);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.tab:hover {
  color: var(--tab-active);
}

.tab.active {
  color: var(--tab-active);
  border-bottom-color: var(--tab-active);
}

.tab-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

/* 数据集结构样式 */
.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.stat-info {
  flex: 1;
}

.stat-label {
  color: var(--gray-text);
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

.structure-table-container {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.structure-table {
  width: 100%;
  border-collapse: collapse;
}

.structure-table th,
.structure-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.structure-table th {
  background: var(--table-header-bg);
  font-weight: 600;
  color: #333;
}

.required-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
}

.required-badge.required {
  background: var(--added-color);
  color: #2e7d32;
}

.required-badge.optional {
  background: var(--missing-color);
  color: #666;
}

.source-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 0.9rem;
}

/* 转换规则样式 */
.rules-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rule-group {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.rule-group-header {
  background: var(--header-bg);
  padding: 15px 20px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rule-items {
  padding: 20px;
}

.rule-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.rule-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.rule-title {
  font-weight: 600;
  color: var(--tab-active);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rule-content {
  color: #666;
  font-size: 0.95rem;
  padding-left: 24px;
}

/* 数据质量样式 */
.quality-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.metric-card {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.metric-card:hover {
  transform: translateY(-2px);
}

.metric-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.metric-header i {
  color: var(--tab-active);
}

.metric-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--tab-active);
  margin-bottom: 20px;
}

.metric-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.detail-label {
  color: #666;
}

.detail-value {
  font-weight: 500;
  color: #333;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-badge.match {
  background: var(--added-color);
  color: #2e7d32;
}

.status-badge.modified {
  background: var(--modified-color);
  color: #e65100;
}

.status-badge.converted {
  background: var(--split-color);
  color: #01579b;
}

.status-badge.missing {
  background: var(--missing-color);
  color: #757575;
}

@media (max-width: 768px) {
  .tabs {
    overflow-x: auto;
  }

  .tab {
    padding: 15px;
    white-space: nowrap;
  }

  .overview-stats {
    grid-template-columns: 1fr 1fr;
  }

  .quality-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .overview-stats {
    grid-template-columns: 1fr;
  }

  .tab-content {
    padding: 15px;
  }
}
</style>
</write_to_file>
